import * as d3 from "d3";
import { Scale } from "./scale"

import { grad2rad } from "./functions";


export interface IFace {
    padding: number
}

export const defaultInitFaceSettings: IFace = {
    padding: 75,
}

export class Face {

    svg = d3.create("svg:g");
    text: any;
    value = 0;

    constructor(private settings: IFace = defaultInitFaceSettings) {
        this.draw();
    }

    draw() {
        this.svg.append("circle")
        .attr("cx", 300)
        .attr("cy", 300)
        .attr("r", 300-this.settings.padding)
        .attr("fill", "none")
        .attr("stroke", "blue")
        this.text = this.svg.append("text")
        .attr("y", 300)//magic number here
        .attr("x", 300)
        .attr("dx", 0)
        .attr("font-size", 28)
        .attr("dy", 200)
        .attr('text-anchor', 'middle')
        .attr("class", "myLabel")//easy to style with CSS
        .text(this.value);
    }

    getSVG() {
        return this.svg.attr("transform", `rotate(-45, 300, 300) translate(0, 0) scale(1)`);;
    }
    tweenText( newValue: number ) {
          return () => d3.interpolateNumber(this.value, newValue);
    }
    getInterpolator(v: number) {

        // let interpolateArray: any[] = [];
        // let corr = 1;
        // if (v < this.value) {corr = -1;}

        // while (this.value !== v) {
        //     interpolateArray.push(this.value);
        //     this.value += corr;
        // }

        // interpolateArray.push(v);
        // this.value = v;
        let i = d3.interpolate(this.value, v)
        
        return (t: any) => {
            console.log(t);
            return i(t)};
    }

    setValue(value: number) {
        console.log(value);
        this.text.transition()
            .ease(d3.easeLinear)
            .duration(500)
            .textTween(() => d3.interpolateRound(this.value, value));
    }}